import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_tab_list/custom/custom_tab.dart';
import 'package:flutter_tab_list/date/date.dart';
import 'package:shared_preferences/shared_preferences.dart';

import 'light_bar_mode_page.dart';
import 'light_screen_mode_page.dart';

class TabListPage extends StatefulWidget {
  @override
  _TabListPageState createState() => _TabListPageState();
}

class _TabListPageState extends State<TabListPage> {
  int modeValue = 1;
  bool isAutoScroll = false;
  PageController defaulPageController = new PageController();
  int currentIndex = 0;
  bool iskey = false;
  List<ImageModel> lightBarList = [];
  List<ImageModel> lightScreenList = [];
  @override
  void initState() {
    getFromDesk().then((value) => setState(() {
      if(value.length==null || value.length==0){
        lightScreenList = imageList01;
        _updateList();
      }else{
        lightScreenList = value;
      }
    }));
    getFromDesk2().then((value) => setState(() {
      if(value.length==null || value.length==0){
        lightBarList = imageList02;
        _updateList();
      }else{
        lightBarList = value;
      }
    }));
    super.initState();
  }

  Future<List<ImageModel>> getFromDesk() async {
    var sp = await SharedPreferences.getInstance();
    List<String> jsonStr = sp.getStringList(IMAGEMODEL_LIGHTSCREEN_LIST);
    if (jsonStr != null) {
      return jsonStr.map((e) => ImageModel.fromMap(json.decode(e))).toList();
    }
    print('获取成功');
    return List.empty();
  }
  void _updateList() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList(
        IMAGEMODEL_LIGHTSCREEN_LIST, lightScreenList.map((e) => json.encode(e.toMap())).toList());
    print('更新成功');
  }


  Future<List<ImageModel>> getFromDesk2() async {
    var sp = await SharedPreferences.getInstance();
    List<String> jsonStr = sp.getStringList(IMAGEMODEL_LIGHTBAR_LIST);
    if (jsonStr != null) {
      return jsonStr.map((e) => ImageModel.fromMap(json.decode(e))).toList();
    }
    print('获取成功');
    return List.empty();
  }
  void _updateList2() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList(
        IMAGEMODEL_LIGHTBAR_LIST, lightBarList.map((e) => json.encode(e.toMap())).toList());
    print('更新成功');
  }
  void iskeyChange() {
    setState(() {
      iskey = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabListPage'),
        centerTitle: true,
        backgroundColor: Colors.black,
      ),
      body: Container(
          color: Colors.black87,
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              GestureDetector(
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 16),
                  child: CustomTab(
                    modeValue: modeValue,
                    isAutoScroll: isAutoScroll,
                    modeListener: (int mode) {
                        if(mode != modeValue){
                          setState(() {
                            modeValue = mode;
                            iskeyChange();
                          });
                        }
                    },
                    isAutoScrollListener: (bool isScroll) {
                      if(isAutoScroll != isScroll){
                        setState(() {
                          isAutoScroll = isScroll;
                          iskeyChange();
                        });
                      }
                    },
                  ),
                ),
              ),
              SizedBox(
                height: 16,
              ),
              modeValue == 1
                  ? LightScreenModePage(
                      lightScreenList:lightScreenList,
                      currentIndex: currentIndex,
                      isAutoScroll: isAutoScroll,
                      iskey: iskey,
                    )
                  : LightBarModePage(
                      lightBarList:lightBarList,
                      currentIndex: currentIndex,
                      isAutoScroll: isAutoScroll,
                      iskey: iskey,
                    ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            modeValue = 1;
                            isAutoScroll = false;
                          });
                          iskeyChange();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            '灯屏暂停',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            modeValue = 2;
                            isAutoScroll = false;
                          });
                          iskeyChange();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            '灯条暂停',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            modeValue = 1;
                            isAutoScroll = true;
                          });
                          iskeyChange();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            '灯屏播放',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            modeValue = 2;
                            isAutoScroll = true;
                          });
                          iskeyChange();
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: Text(
                            '灯条播放',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            currentIndex = 2;
                            iskey = true;
                            isAutoScroll = false;
                          });
                        },
                        child: Container(
                          width: 80,
                          height: 30,
                          alignment: Alignment.center,
                          child: Text(
                            '2',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            currentIndex = 4;
                            iskey = true;
                            isAutoScroll = false;
                          });
                        },
                        child: Container(
                          width: 80,
                          height: 30,
                          alignment: Alignment.center,
                          child: Text(
                            '4',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            currentIndex = 6;
                            iskey = true;
                            isAutoScroll = false;
                          });
                        },
                        child: Container(
                          width: 80,
                          height: 30,
                          alignment: Alignment.center,
                          child: Text(
                            '6',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                  Expanded(
                    flex: 1,
                    child: GestureDetector(
                        onTap: () {
                          setState(() {
                            currentIndex = 8;
                            iskey = true;
                            isAutoScroll = false;
                          });
                        },
                        child: Container(
                          width: 80,
                          height: 30,
                          alignment: Alignment.center,
                          child: Text(
                            '8',
                            style: TextStyle(fontSize: 16, color: Colors.white),
                          ),
                        )),
                  ),
                ],
              ),
            ],
          )),
    );
  }
}




